﻿var dataEvent = [{
    eventId: "years_1",
    eventYear: "2016",
    eventImgUrl: "images/1.jpg",
    eventH: "图片1标题",
    eventP:"图片1内容介绍",
    },
    {
        eventId: "years_2",
        eventYear: "2017",
        eventImgUrl: "images/2.jpg",
        eventH: "图片2标题",
        eventP:"图片2内容介绍"
    },
    {
        eventId: "years_3",
        eventYear: "2018",
        eventImgUrl: "images/3.jpg",
        eventH: "图片3标题",
        eventP:"图片3内容介绍"
    },
    {
        eventId: "years_4",
        eventYear: "2019",
        eventImgUrl: "images/4.jpg",
        eventH: "图片4标题",
        eventP:"图片4内容介绍"
    },
    {
        eventId: "years_5",
        eventYear: "2020",
        eventImgUrl: "images/5.jpg",
        eventH: "图片5标题",
        eventP:"图片5内容介绍"
    },
    {
        eventId: "years_6",
        eventYear: "2021",
        eventImgUrl: "images/6.jpg",
        eventH: "图片6标题",
        eventP:"图片6内容介绍"
    },
    {
        eventId: "years_7",
        eventYear: "2022",
        eventImgUrl: "images/7.jpg",
        eventH: "图片7标题",
        eventP:"图片7内容介绍"
    },
    {
        eventId: "years_8",
        eventYear: "2023",
        eventImgUrl: "images/8.jpg",
        eventH: "图片8标题",
        eventP:"图片8内容介绍"
    },
    {
        eventId: "years_9",
        eventYear: "2024",
        eventImgUrl: "images/9.jpg",
        eventH: "图片9标题",
        eventP:"图片9内容介绍"
    },
    {
        eventId: "years_10",
        eventYear: "2025",
        eventImgUrl: "images/10.jpg",
        eventH: "图片10标题",
        eventP:"图片10内容介绍"
    }
];

//获取元素
var pageWidth = document.documentElement.clientWidth,
    pageHeight = document.documentElement.clientHeight,
    event_can = document.getElementById("event_can"),
    event_ctx = event_can.getContext("2d");
    event_can.width = pageWidth;
    event_can.height = pageHeight;

var nodes = [],
    line = [],
    rakes = [],
    years = document.getElementsByClassName("years"),
    point = document.getElementsByClassName(" point"),
    event_text = document.getElementsByClassName("event_text"),
    event_h = document.getElementsByClassName("event_h"),
    event_p = document.getElementsByClassName("p"),
    event_points = document.getElementsByClassName("point"),
    event_years = document.getElementById("event_years"),
    event_detail = document.getElementById("event_detail"),
    inner = document.getElementById("inner"),
    inner_item = document.getElementsByClassName("inner_item"),
    event_but_next = document.getElementById("event_next"),
    event_but_prev = document.getElementById("event_prev"),
    indicator_item = document.getElementsByClassName("indicator_item"),
    event_index = 0,
    event_end = 0,
    event_back = document.getElementById("event_back"),
    eventImageBox = document.getElementsByClassName('event_imageBox')[0],
    event_image = document.getElementsByClassName("event_image"),
    eventUl = document.getElementById('indicators'),
    eventLi = eventUl.getElementsByTagName('li'),
    eventNum = 0,
    DivImg=document.getElementsByClassName("event_imageBox")[0].getElementsByTagName("img");


    event_detail.style.width = pageWidth + "px" ;
    event_detail.style.height = pageHeight + "px";
    // event_detail.style.width = pageWidth + "px" ;
    // event_detail.style.height = pageHeight + "px";

    var ndEvent_can = event_can.cloneNode(true);
    // event_years.innerHTML='';
    event_years.innerHTML='';
    eventUl.innerHTML ='';
    inner.innerHTML='';
    eventImageBox.innerHTML='';

//动态生成页面数据
for (var i=0;i<dataEvent.length;i++){
    event_years.innerHTML += "<div id='"+dataEvent[i].eventId+"' class='years'>"+dataEvent[i].eventYear+"</div>";
}

//console.log( eventImageBox)
for (var i=0;i<dataEvent.length;i++){
    //event_years.innerHTML += "<div id='"+dataEvent[i].eventId+"' class='years'>"+dataEvent[i].eventYear+"</div>";
    var p = "point_"+(i+1);
    event_years.innerHTML += "<div id='"+p+"' class='point'></div>";
    eventUl.innerHTML += "<li index='"+i+"' class='indicator_item'></li>";
    inner.innerHTML +="<div class='inner_item'><div class='event_text'><h class='event_h'>"+dataEvent[i].eventH+"</h><p class='event_p'>"+dataEvent[i].eventP+"</p></div>";
    eventImageBox.innerHTML += "<img src='"+dataEvent[i].eventImgUrl+"' class='event_image'>";
//console.log( eventImageBox.innerHTML)

}
//console.log( eventImageBox)

function addResizeHandle(){
    if(window.addEventListener){
        window.addEventListener("resize",eventResize);
    }else{
        window.attchEvent("on" + "resize",eventResize);
    }
}
addResizeHandle();
function eventResize(){
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;

    drawPath();
    inner.style.transition = "left 0s";
    event_detail.style.width = pageWidth + "px" ;
    event_detail.style.height = pageHeight + "px";
    for(let i=0;i<inner_item.length;i++){
        inner_item[i].style.width = pageWidth + "px";
        inner_item[i].style.height = pageHeight + "px";
    }
    inner.style.width = pageWidth * inner_item.length +"px";
    inner.style.left = (-event_index * pageWidth) + "px";
    setTimeout(function(){
        inner.style.transition = "left 1s";
    },100);

    // event_detail.style.width = pageWidth + "px" ;
    // event_detail.style.height = pageHeight + "px";
}


//事件页面画路线
function drawPath(){

    var x = [];
    var y = [];
    var j = [];
    var k = [];
    nodes = [];
    line = [];
    rakes = [];
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
    event_can.width = pageWidth;
    event_can.height = pageHeight;

    event_ctx.lineWidth = 1;
    event_ctx.strokeStyle = "#737373";
    event_ctx.setLineDash([8,8]);
    event_ctx.beginPath();
    event_ctx.moveTo(pageWidth*0,pageHeight*0.5);
    event_ctx.lineTo(pageWidth*0.1,pageHeight*0.52);//1
    x[0] = pageWidth*0.1;
    y[0] = pageHeight*0.52;
    event_ctx.lineTo(pageWidth*0.19,pageHeight*0.5);//2
    x[1] = pageWidth*0.19;
    y[1] = pageHeight*0.5;
    event_ctx.lineTo(pageWidth*0.28,pageHeight*0.53);//3
    x[2] = pageWidth*0.28;
    y[2] = pageHeight*0.53;
    event_ctx.lineTo(pageWidth*0.39,pageHeight*0.46);//4
    x[3] = pageWidth*0.39;
    y[3] = pageHeight*0.46;
    event_ctx.lineTo(pageWidth*0.49,pageHeight*0.52);//5
    x[4] = pageWidth*0.49;
    y[4] = pageHeight*0.52;
    event_ctx.lineTo(pageWidth*0.6,pageHeight*0.48);//6
    x[5] = pageWidth*0.6;
    y[5] = pageHeight*0.48;
    event_ctx.lineTo(pageWidth*0.68,pageHeight*0.58);//7
    x[6] = pageWidth*0.68;
    y[6] = pageHeight*0.58;
    event_ctx.lineTo(pageWidth*0.76,pageHeight*0.52);//8
    x[7] = pageWidth*0.76;
    y[7] = pageHeight*0.52;
    event_ctx.lineTo(pageWidth*0.83,pageHeight*0.56);//9
    x[8] = pageWidth*0.83;
    y[8] = pageHeight*0.56;
    event_ctx.lineTo(pageWidth*0.9,pageHeight*0.52);//10
    x[9] = pageWidth*0.9;
    y[9]= pageHeight*0.52;
    event_ctx.lineTo(pageWidth*1,pageHeight*0.56);
    event_ctx.stroke();
    event_ctx.closePath();
    for(i=0;i<10;i++){
        var node = {
            x:0,
            y:0
        };
        node.x = x[i];
        node.y = y[i];
        nodes.push(node);
    }


    event_ctx.fillStyle = "#fff";
    event_ctx.setLineDash([0,0]);
    event_ctx.beginPath();
    event_ctx.moveTo(pageWidth*0.1,pageHeight*0.52);
    event_ctx.arc(pageWidth*0.1,pageHeight*0.52,1.5,0,Math.PI*2);
    event_ctx.moveTo(pageWidth*0.19,pageHeight*0.5);
    event_ctx.arc(pageWidth*0.19,pageHeight*0.5,1.5,0,Math.PI*2);
    event_ctx.moveTo(pageWidth*0.28,pageHeight*0.53);
    event_ctx.arc(pageWidth*0.28,pageHeight*0.53,1.5,0,Math.PI*2);
    event_ctx.moveTo(pageWidth*0.39,pageHeight*0.46);
    event_ctx.arc(pageWidth*0.39,pageHeight*0.46,1.5,0,Math.PI*2);
    event_ctx.moveTo(pageWidth*0.49,pageHeight*0.52);
    event_ctx.arc(pageWidth*0.49,pageHeight*0.52,1.5,0,Math.PI*2);
    event_ctx.moveTo(pageWidth*0.6,pageHeight*0.48);
    event_ctx.arc(pageWidth*0.6,pageHeight*0.48,1.5,0,Math.PI*2);
    event_ctx.moveTo(pageWidth*0.68,pageHeight*0.58);
    event_ctx.arc(pageWidth*0.68,pageHeight*0.58,1.5,0,Math.PI*2);
    event_ctx.moveTo(pageWidth*0.76,pageHeight*0.52);
    event_ctx.arc(pageWidth*0.76,pageHeight*0.52,1.5,0,Math.PI*2);
    event_ctx.moveTo(pageWidth*0.83,pageHeight*0.56);
    event_ctx.arc(pageWidth*0.83,pageHeight*0.56,1.5,0,Math.PI*2);
    event_ctx.moveTo(pageWidth*0.9,pageHeight*0.52);
    event_ctx.arc(pageWidth*0.9,pageHeight*0.52,1.5,0,Math.PI*2);
    event_ctx.fill();
    event_ctx.closePath();

    event_ctx.setLineDash([0,0]);
    //event_ctx.lineWidth = 3;
    event_ctx.strokeStyle = "#00ffb8";
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.1,pageHeight*0.52,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.19,pageHeight*0.5,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.28,pageHeight*0.53,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.39,pageHeight*0.46,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.49,pageHeight*0.52,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.6,pageHeight*0.48,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.68,pageHeight*0.58,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.76,pageHeight*0.52,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.83,pageHeight*0.56,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.beginPath();
    event_ctx.arc(pageWidth*0.9,pageHeight*0.52,6,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.closePath();

    event_ctx.strokeStyle = "#737373";
    event_ctx.beginPath();
    event_ctx.moveTo(pageWidth*0.1,pageHeight*0.52);
    event_ctx.lineTo(pageWidth*0.12,pageHeight*0.37);//1
    j[0] = pageWidth * 0.12;
    k[0] = pageHeight * 0.37;
    event_ctx.moveTo(pageWidth*0.19,pageHeight*0.5);
    event_ctx.lineTo(pageWidth*0.21,pageHeight*0.67);//2
    j[1] = pageWidth*0.21;
    k[1] = pageHeight*0.67;
    event_ctx.moveTo(pageWidth*0.28,pageHeight*0.53);
    event_ctx.lineTo(pageWidth*0.26,pageHeight*0.33);//3
    j[2] = pageWidth*0.26;
    k[2] = pageHeight*0.33;
    event_ctx.moveTo(pageWidth*0.39,pageHeight*0.46);
    event_ctx.lineTo(pageWidth*0.37,pageHeight*0.68);//4
    j[3] = pageWidth*0.37;
    k[3] = pageHeight*0.68;
    event_ctx.moveTo(pageWidth*0.49,pageHeight*0.52);
    event_ctx.lineTo(pageWidth*0.51,pageHeight*0.36);//5
    j[4] = pageWidth*0.51;
    k[4] = pageHeight*0.36;
    event_ctx.moveTo(pageWidth*0.6,pageHeight*0.48);
    event_ctx.lineTo(pageWidth*0.58,pageHeight*0.68);//6
    j[5] = pageWidth*0.58;
    k[5] = pageHeight*0.68;
    event_ctx.moveTo(pageWidth*0.68,pageHeight*0.58);
    event_ctx.lineTo(pageWidth*0.66,pageHeight*0.43);//7
    j[6] = pageWidth*0.66;
    k[6] = pageHeight*0.43;
    event_ctx.moveTo(pageWidth*0.76,pageHeight*0.52);
    event_ctx.lineTo(pageWidth*0.78,pageHeight*0.33);//8
    j[7] = pageWidth*0.78;
    k[7] = pageHeight*0.33;
    event_ctx.moveTo(pageWidth*0.83,pageHeight*0.56);
    event_ctx.lineTo(pageWidth*0.81,pageHeight*0.76);//9
    j[8] = pageWidth*0.81;
    k[8] = pageHeight*0.76;
    event_ctx.moveTo(pageWidth*0.9,pageHeight*0.52);
    event_ctx.lineTo(pageWidth*0.88,pageHeight*0.39);//10
    j[9] = pageWidth*0.88;
    k[9] = pageHeight*0.39;
    event_ctx.stroke();
    event_ctx.closePath();
    for(var i=0;i<10;i++){//存储直线延伸的点
        var node = {
            x:0,
            y:0
        };
        node.x = j[i];
        node.y = k[i];
        line.push(node);
    }

    for(var i=0;i<10;i++){//存储直线的斜率，为缓慢画直线做准备
        var rake = (nodes[i].y-line[i].y)/(nodes[i].x-line[i].x);
        rakes.push(rake);
    }


    event_ctx.fillStyle = "#00ffb8";
    event_ctx.fillRect(pageWidth*0.119,pageHeight*0.36,6,6);
    event_ctx.fillRect(pageWidth*0.208,pageHeight*0.671,6,6);
    event_ctx.fillRect(pageWidth*0.259,pageHeight*0.329,6,6);
    event_ctx.fillRect(pageWidth*0.368,pageHeight*0.681,6,6);
    event_ctx.fillRect(pageWidth*0.508,pageHeight*0.358,6,6);
    event_ctx.fillRect(pageWidth*0.578,pageHeight*0.681,6,6);
    event_ctx.fillRect(pageWidth*0.658,pageHeight*0.428,6,6);
    event_ctx.fillRect(pageWidth*0.778,pageHeight*0.329,6,6);
    event_ctx.fillRect(pageWidth*0.808,pageHeight*0.761,6,6);
    event_ctx.fillRect(pageWidth*0.878,pageHeight*0.389,6,6);

}

drawPath();

//事件页面画虚线圈
function event_delayDrawDash(num){
    event_ctx.strokeStyle = "#737373";
    event_ctx.lineWidth = 1;
    event_ctx.setLineDash([3,3]);
    event_ctx.beginPath();
    event_ctx.arc(nodes[num].x,nodes[num].y,20,0,Math.PI*2);
    event_ctx.stroke();
    event_ctx.closePath();
}
var arc_timer = "";//缓慢画实线圈时间器，圆圈画完停止动作
var delay_arc_timer = ""//缓慢画实线圈时间器，鼠标移开年份，停止动作
//事件页面缓慢画实线
function event_delayDrawLine(begin_x,begin_y,num){
    line_timer = "";//缓慢画直线时间器
    var x= nodes[num].x-line[num].x;//需要画直线的长度
    event_ctx.lineWidth = 1;
    event_ctx.strokeStyle = "#fff";
    event_ctx.setLineDash([0,0]);

    event_ctx.beginPath();
    event_ctx.moveTo(begin_x,begin_y);
    var end_x = begin_x+1/40*(x);
    var end_y = begin_y+rakes[num]*1/40*(x);
    event_ctx.lineTo(end_x,end_y);
    event_ctx.stroke();
    event_ctx.closePath();
    line_timer = setTimeout(function(){
        event_delayDrawLine(end_x,end_y,num);
    },20);
    if(x>0){
        if(end_x+0.5>=nodes[num].x){
            clearTimeout(line_timer);
        }
    }else{
        if(end_x-0.5<=nodes[num].x){
            clearTimeout(line_timer);
        }
    }
}
//事件页面缓慢画实线圈
function event_delayDrawArc(central_x,central_y,begin){
    event_ctx.lineWidth = 1;
    event_ctx.setLineDash([0,0]);
    event_ctx.strokeStyle = "#c5c5c5";
    event_ctx.beginPath();
    var end = begin+Math.PI/10;
    event_ctx.arc(central_x,central_y,20,0,end);
    event_ctx.stroke();
    event_ctx.closePath();
    arc_timer = setTimeout(function(){
        event_delayDrawArc(central_x,central_y,end);
    },30);
    if(end>=Math.PI*2){
        clearTimeout(arc_timer);
    }
}
//鼠标接触年份，缓慢画直线，画实线圈
for(let i=0;i<years.length;i++){
    years[i].onmouseover=function(){
        event_delayDrawDash(i);
        event_delayDrawLine(line[i].x,line[i].y,i);
        delay_arc_timer = setTimeout(function(){
            event_delayDrawArc(nodes[i].x,nodes[i].y,0);
        },800);
    }
}
//鼠标移开年份，重绘整个画布
for(let i=0;i<years.length;i++){
    years[i].onmouseout=function(){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
        event_ctx.clearRect(0,0,pageWidth,pageHeight);
        clearTimeout(line_timer);
        clearTimeout(delay_arc_timer);
        clearTimeout(arc_timer);
        drawPath();
    }
}
//鼠标接触拐点，先画虚线，再缓慢画实线圈
for(let i=0;i<event_points.length;i++){
    event_points[i].onmouseover=function(){
        event_delayDrawDash(i);
        event_delayDrawArc(nodes[i].x,nodes[i].y,0);
    }
}
//鼠标移开拐点，停止动作，重绘画布
for(let i=0;i<event_points.length;i++){
    event_points[i].onmouseout=function(){
        clearTimeout(arc_timer);
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
        event_ctx.clearRect(0,0,pageWidth,pageHeight);
        drawPath();
    }
}
//点击年份，出现轮播图
for(let i=0;i<years.length;i++){
    years[i].onclick=function(){
        event_years.style.visibility = "hidden";
        event_years.style.zIndex = "-10";
        event_detail.style.visibility = "visible";
        event_detail.style.zIndex = "10";
        inner.style.transition = "left 0s";
        event_index = i;
        inner.style.left = (-i * pageWidth) + "px";
        event_showButton();
        showEventPic();
        setTimeout(function(){
            inner.style.transition = "left 1s";
        },100);

    }
}
//点击拐点，出现轮播图
for(let i=0;i<event_points.length;i++){
    event_points[i].onclick=function(){
        event_years.style.visibility = "hidden";
        event_years.style.zIndex = "-10";
        event_detail.style.visibility = "visible";
        event_detail.style.zIndex = "10";
        inner.style.transition = "left 0s";
        event_index = i;
        inner.style.left = (-i * pageWidth) + "px";
        event_showButton();
        setTimeout(function(){
            inner.style.transition = "left 1s";
        },100);

    }
}

event_back.onclick=function(){//点击三角形返回，回到事件路线页面
    event_years.style.visibility = "visible";
    event_years.style.zIndex = "10";
    event_detail.style.visibility = "hidden";
    event_detail.style.zIndex = "-10";
}





for(let i=0;i<inner_item.length;i++){//轮播图子项
    inner_item[i].style.width = pageWidth + "px";
    inner_item[i].style.height = pageHeight + "px";
}
inner.style.width = pageWidth * inner_item.length +"px";



function event_next(){//轮播图下一张
    event_start = new Date().getTime();//动作开始时间
    var oldLeft = parseInt(inner.style.left);
    if(event_start-event_end<1000){//1s内不得重复动作
        return;
    }
    if(oldLeft<=-(inner_item.length-1)*pageWidth){
        inner.style.left = 0 +"px";
        event_end = new Date().getTime();
        event_index=0;
        event_showButton();
        showEventPic();
    }else{
        inner.style.left = oldLeft - pageWidth +"px";
        event_end = new Date().getTime();
        event_index += 1;
        event_showButton();
        showEventPic();
    }


}

function event_prev(){//轮播图上一张
    event_start = new Date().getTime();
    var oldLeft = parseInt(inner.style.left);
    if(event_start-event_end<1000){//1s内不得重复动作
        return;
    }
    if(oldLeft>=0){
        inner.style.left = -((inner_item.length-1)*pageWidth) +"px";
        event_end = new Date().getTime();
        event_index = indicator_item.length-1;
        event_showButton();
        showEventPic()
    }else{
        inner.style.left = oldLeft + pageWidth +"px";
        event_index -= 1;
        event_end = new Date().getTime();
        event_showButton();
        showEventPic();
    }

}
event_but_next.onclick = function(){
    event_next();
}
event_but_prev.onclick = function(){
    event_prev();
}
for(let i=0;i<indicator_item.length;i++){//点击按钮，出现相应页面
    indicator_item[i].onclick=function(){
        if(i==event_index){
            return;
        }
        event_index = i;
        event_showButton();
        inner.style.left = (-i * pageWidth) + "px";
        showEventPic();
    }
}
function event_showButton(){//切换按钮样式
    for(var j=0;j<indicator_item.length;j++){
        indicator_item[j].classList.remove("active");
    }
    indicator_item[event_index].classList.add("active");
}
function showEventPic(){//缩放出现图片
    for(let i=0;i<event_image.length;i++){
        if(event_image[i].style.opacity==1){
            event_image[i].style.transform = "scale(0.75,0.75)";
            event_image[i].style.opacity = 0;
            break;
        }
       
    }
    setTimeout(function(){
        event_image[event_index].style.opacity=1;
        event_image[event_index].style.transform="scale(1,1)";

        },800);
}
